<!DOCTYPE html>
<html ng-app="ui.wisoft" style="height: 100%;">
<head lang="en">
    <meta charset="UTF-8">
    <title>tilelist test</title>
    <link rel="stylesheet" href="../../themes/default/theme.css">
    <link rel="stylesheet" href="../../themes/default/tilelist.css">
    <script src="../../lib/angular-1.3.0-beta.13/angular.js"></script>
    <script src="../resizelistener/resizelistener.js"></script>
    <script src="tilelist.js"></script>
</head>
<body ng-controller="mainCtrl" style="height: 100%;">
    <div style="width: 100%;height:100%;margin: 0 auto;padding-top: 5px;">
        <!-- <tilelist dataProvider="tilelistdata" width="800" height="450" colcount="4" rowCount="3" colWidth="200" rowHeight="150" direction="v" itemRender="myRender.html"> -->
        <wi-tilelist dataProvider="tilelistdata" height="500" colcount="4" rowHeight="200" direction="v" itemRender="myRender.html">
            <script type="text/ng-template" id="myRender.html">
                <div ng-style="{'background-color':data.color,'width': '100%','height': '100%'}"></div>
            </script>
        </wi-tilelist>
        <button class="wi-btn" ng-click="setCloseOrOpen()">关闭/显示</button>
        <button class="wi-btn" ng-click="setData()">修改数据源</button>
        <button class="wi-btn" ng-click="clearData()">清空数据源</button>
    </div>
    <script>
        angular.module('ui.wisoft', ['ui.wisoft.tilelist'])
            .controller('mainCtrl', ['$scope', function($scope){
                var arr=[];
                arr.push({color:'#1c1c84',name:'1'});
                arr.push({color:'#2c2c84',name:'2'});
                arr.push({color:'#3c3c84',name:'3'});
                arr.push({color:'#4c4c84',name:'4'});
                arr.push({color:'#5c5c84',name:'5'});
                arr.push({color:'#6c6c84',name:'6'});
                arr.push({color:'#7c7c84',name:'7'});
                arr.push({color:'#9c8c84',name:'8'});
                arr.push({color:'#ac9c84',name:'9'});
                arr.push({color:'#bcac84',name:'10'});
                arr.push({color:'#ccbc84',name:'11'});
                arr.push({color:'#dccc84',name:'12'});
                arr.push({color:'#ecdc84',name:'13'});
                arr.push({color:'#fcec84',name:'14'});
                arr.push({color:'#fcfc14',name:'15'});
                arr.push({color:'#cabc24',name:'16'});
                arr.push({color:'#dbcc34',name:'17'});
                arr.push({color:'#ecdc44',name:'18'});
                $scope.tilelistdata = arr;

                $scope.setData = function() {
                    var arr=[];
                    arr.push({color:'#1c8c84',name:'1'});
                    arr.push({color:'#2c8c84',name:'2'});
                    arr.push({color:'#3c8c84',name:'3'});
                    arr.push({color:'#4c8c84',name:'4'});
                    arr.push({color:'#5c8c84',name:'5'});
                    arr.push({color:'#6c8c84',name:'6'});
                    arr.push({color:'#7c8c84',name:'7'});
                    arr.push({color:'#9c8c84',name:'8'});
                    arr.push({color:'#ac8c84',name:'9'});
                    arr.push({color:'#bc8c84',name:'10'});
                    arr.push({color:'#cc8c84',name:'11'});
                    arr.push({color:'#dc8c84',name:'12'});
                    arr.push({color:'#ec8c84',name:'13'});
                    arr.push({color:'#fc8c84',name:'14'});
                    $scope.tilelistdata = arr;
                };

                $scope.clearData = function() {
                    $scope.tilelistdata = [];
                };

                $scope.isclose = true;
                $scope.setCloseOrOpen = function() {
                    $scope.isclose = !$scope.isclose;
                }
            }]
        );
    </script>
</body>
</html>